import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import './Serve3.css'

export default function Serve3() {
    const navigate = useNavigate()
    const [data, setData] = useState([
        {
            result: '支原体感染',
            recommendation: '奥司他韦颗粒、头孢克洛干混悬剂',
            doctor: '张三被',
            time: '2023-10-10 10:10:10',
            status: '未购买'
        },
        {
            result: '支原体感染',
            recommendation: '奥司他韦颗粒、头孢克洛干混悬剂',
            doctor: '张三被',
            time: '2023-10-10 10:10:10',
            status: '已失效'
        },
        {
            result: '支原体感染',
            recommendation: '奥司他韦颗粒、头孢克洛干混悬剂',
            doctor: '张三被',
            time: '2023-10-10 10:10:10',
            status: '已购买'
        },
        {
            result: '支原体感染',
            recommendation: '奥司他韦颗粒、头孢克洛干混悬剂',
            doctor: '张三被',
            time: '2023-10-10 10:10:10',
            status: '审核中'
        },
        {
            result: '支原体感染',
            recommendation: '奥司他韦颗粒、头孢克洛干混悬剂',
            doctor: '张三被',
            time: '2023-10-10 10:10:10',
            status: '审核不通过'
        },
    ])
    return (
        <div className='serve3'>
            <div className='serve3-header'>
                <h1>我的处方</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="serve3-content">
                {
                    data.map((item, index) => {
                        return <div key={index} className='serve3-content-item'>
                            <p>诊断结果：{item.result}</p>
                            <p>用药建议：<span style={{ fontSize: '10px' }}>{item.recommendation}</span></p>
                            <p style={{ fontSize: '10px' }}>{item.doctor} {item.time}</p>
                            <div className="status">
                                <span
                                    style={{
                                        fontWeight: 'bold',
                                        color: item.status === '未购买'
                                            ? 'red'
                                            : item.status === '已失效'
                                                ? 'gray'
                                                : item.status === '已购买'
                                                    ? 'green'
                                                    : item.status === '审核中'
                                                        ? 'yellow'
                                                        : 'red'
                                    }}>{item.status}</span>
                            </div>
                            <div className="btn">
                                {
                                    item.status === '未购买'
                                        ? <Button>去购买</Button>
                                        : item.status === '已失效' || item.status === '已购买'
                                            ? <Button>申请续方</Button>
                                            : <Button>查看详情</Button>
                                }
                            </div>
                        </div>
                    })
                }
            </div>
        </div>
    )
}
